<script setup lang="ts">
import { reactive, watch } from 'vue'

const props = defineProps({
  modelValue: {
    type: [String, Number, Array],
    default: () => null
  },
  keyValue: {
    type: String,
    default: () => 'id'
  },
  label: {
    type: String,
    default: () => ''
  },
  list: {
    type: Array,
    default: () => []
  },
  checkStrictly: {
    type: Boolean,
    default: () => false
  },
  showCheckbox: {
    type: Boolean,
    default: () => false
  },
  clearable: {
    type: Boolean,
    default: () => true
  },
  multiple: {
    type: Boolean,
    default: () => false
  },
  option: {
    type: Object,
    default: () => {}
  },
  expandAll: {
    type: Boolean,
    default: () => false
  },
  collapseTags: {
    type: Boolean,
    default: () => false
  },
  disabled: {
    type: Boolean,
    default: () => false
  }
})

const emit = defineEmits(['update:modelValue'])

const state = reactive({
  inputValue: props.modelValue ? props.modelValue : null
})

const change = () => {
  emit('update:modelValue', state.inputValue)
}

watch(
  () => props.modelValue,
  (val: any) => {
    state.inputValue = val
  }
)
</script>

<template>
  <el-tree-select
    class="!w-full"
    v-model="state.inputValue"
    filterable
    :placeholder="'请选择' + props.label"
    :default-expand-all="props.expandAll"
    :highlight-current="!props.multiple"
    :node-key="props.keyValue"
    :props="props.option"
    :data="props.list"
    :disabled="props.disabled"
    :check-strictly="props.checkStrictly"
    :collapse-tags="props.collapseTags"
    :collapse-tags-tooltip="props.collapseTags"
    :clearable="props.clearable"
    :multiple="props.multiple"
    :render-after-expand="false"
    :show-checkbox="props.showCheckbox"
    @change="change"
  />
</template>

<style lang="scss" scoped></style>
